<template>
  <div class="page-form-block">
    <div class="car-licenseno">
      <div class="licenseno inline-block">{{ carInfo?.licenseNo }}</div>
      <div class="tag-list inline-block" v-if="cTags && cTags.length > 0">
        <tag :type="tag.type" size="large" v-for="(tag, index) in cTags" :key="index">{{ tag.label }}</tag>
      </div>
      <div class="operate-wrapper float-right">
        <slot name="operate"></slot>
      </div>
    </div>
    <div class="car-model-name">
      <field-item label="车型">{{ carInfo?.modelName }}</field-item>
    </div>
    <div class="car-info-list">
      <slot>
        <field-item v-for="item in fieldList" :key="item.prop" :label="item.label">
          {{ carInfo ? carInfo[item.prop] || '-' : '-' }}
        </field-item>
      </slot>
    </div>
  </div>
</template>
<script setup>
  import { computed } from 'vue'
  const props = defineProps({
    carInfo: {
      type: Object,
      default: () => {},
    },
    tags: {
      type: Array,
      default: () => [
        // { type: 'warn', label: '维修中' },
      ],
    },
    fieldList: {
      type: Array,
      default: () => {
        return [
          { label: '车架号', prop: 'vin' },
          { label: '归属门店', prop: 'siteName' },
          { label: '归属车场', prop: 'libraryName' },
        ]
      },
    },
  })

  const cTags = computed(() => {
    let tags = props.tags
    if (tags && tags.length > 0) {
      tags = tags.map((tag) => {
        if (!tag) return undefined
        if (typeof tag == 'object') {
          return {
            type: tag.type || 'warn',
            label: tag.label,
          }
        } else {
          return {
            type: 'warn',
            label: tag,
          }
        }
      })
      tags = tags.filter((tag) => tag)
      return tags
    }
    return []
  })
</script>
<style lang="less" scoped>
  .page-form-block {
    width: 100%;
  }
  .car-licenseno {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    .licenseno {
      vertical-align: bottom;
    }
    .tag-list {
      margin-left: 12px;
      font-weight: 400;
      .custom-tag + .custom-tag {
        margin-left: 16px;
      }
    }
  }
  .car-model-name {
    margin-top: 14px;
  }
  .car-info-list {
    margin-top: 16px;
    .field-item {
      margin-right: 48px;
    }
    .field-item:last-of-type {
      margin-right: 0;
    }
  }
</style>
